<script setup>
import { View, Picture as IconPicture } from "@element-plus/icons-vue";
import { ref } from "vue";
import { formatTime } from "@/utils/format";
import { getProductImageList } from "@/api/productImage";
import { getProductDetail, updateProduct } from "@/api/product";
import { openFilePreview } from "@/utils/kkFileView";

// 抽屉显隐
const visibleDrawer = ref(false);
// 存储申请数据
const detail = ref({});
// 存储图片数据
const imageList = ref([]);
// 存储图片预览数据
const previewImageList = ref([]);
// 控制图片预览显隐
const previewVisible = ref(false);
// 当前预览图片索引
const currentPreviewIndex = ref(0);

const emit = defineEmits(["success"]);
const handleOpen = async (row) => {
  const res = await getProductDetail(row.productId);
  detail.value = res.data.data;
  handleSave();
  visibleDrawer.value = true;
};

defineExpose({
  handleOpen,
});

const statusMap = [
  { label: "待审核", value: 0 },
  { label: "不通过", value: 1 },
  { label: "上架", value: 2 },
  { label: "下架", value: 3 },
];

// 请求参数
const data = ref({
  productId: "",
  status: 0,
});

// 获取商品图片
const handleSave = async () => {
  const res = await getProductImageList(detail.value.productId);
  imageList.value = res.data.data;
  previewImageList.value = res.data.data.map((item) => item.imageUrl);
};

// 打开图片预览
const openPreview = (index) => {
  currentPreviewIndex.value = index;
  previewVisible.value = true;
};

// 取消
const handleCancel = () => {
  visibleDrawer.value = false;
  detail.value = {};
  data.value = { productId: "", status: 0 };
  previewVisible.value = false; // 关闭预览
};

// 确定
const handleConfirm = async () => {
  data.value.productId = detail.value.productId;
  data.value.status = detail.value.status;
  const res = await updateProduct(data.value);
  emit("success");
  ElMessage({
    message: "成功",
    type: "success",
    plain: true,
  });
  // 关闭抽屉
  handleCancel();
};
</script>

<template>
  <!-- 抽屉 -->
  <el-drawer
    v-model="visibleDrawer"
    title="产品信息详情"
    direction="rtl"
    size="50%"
    @close="handleCancel"
  >
    <el-card style="max-width: 100%">
      <!-- 轮播图 -->
      <el-carousel height="240px" motion-blur v-if="imageList.length > 0">
        <el-carousel-item v-for="(item, index) in imageList" :key="item.id">
          <!-- 点击图片打开全屏预览 -->
          <div
            @click="openPreview(index)"
            style="width: 100%; height: 100%; cursor: zoom-in"
          >
            <el-image
              style="width: 100%; height: 100%"
              :src="item.imageUrl"
              fit="contain"
            >
              <template #error>
                <div class="image-slot">
                  <el-icon><icon-picture /></el-icon>
                </div>
              </template>
            </el-image>
          </div>
        </el-carousel-item>
      </el-carousel>

      <el-form :model="detail" label-width="80px" style="margin-top: 20px">
        <el-form-item label="产品编号">
          <el-input v-model="detail.productId" disabled></el-input>
        </el-form-item>
        <el-form-item label="产品类型">
          <el-input v-model="detail.productTypeName" disabled></el-input>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="detail.productName" disabled></el-input>
        </el-form-item>
        <el-form-item label="单价">
          <el-input v-model="detail.price" disabled></el-input>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="detail.stock" disabled></el-input>
        </el-form-item>
        <el-form-item label="销量">
          <el-input v-model="detail.salesVolume" disabled></el-input>
        </el-form-item>
        <el-form-item label="产地">
          <el-input v-model="detail.origin" disabled></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="detail.status" style="width: 150px">
            <template #prefix>
              <el-tag v-if="detail.status === 0" type="info"> 待审核 </el-tag>
              <el-tag v-if="detail.status === 1" type="warning">
                不通过
              </el-tag>
              <el-tag v-if="detail.status === 2" type="success"> 上架 </el-tag>
              <el-tag v-if="detail.status === 3" type="danger"> 下架 </el-tag>
            </template>
            <el-option
              v-for="item in statusMap"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品描述">
          <div class="view-content" v-html="detail.description"></div>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-drawer>

  <!-- 全屏图片预览组件 -->
  <el-image-viewer
    v-if="previewVisible"
    :url-list="previewImageList"
    :initial-index="currentPreviewIndex"
    @close="previewVisible = false"
  />
</template>
<style scoped>
.el-carousel__item {
  background-color: #f5f7fa;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.image-slot .el-icon {
  font-size: 30px;
}

/* 让预览组件全屏显示 */
:deep(.el-image-viewer__wrapper) {
  z-index: 9999; /* 确保在最上层 */
}

.view-content {
  width: 100%;
  min-height: 250px;
  overflow-y: auto;
  border: 1px solid #f5f5f5;
  padding: 10px;
}
</style>
